//对图片进行压缩
function compressimg(fileObj, callback) {
    if (typeof (FileReader) === 'undefined') {
        console.log("当前浏览器内核不支持base64图片压缩")
    } else {
        try {
            var reader = new FileReader();
            reader.onload = function (e) {
                var image = $('<img/>');
                image.load(function () {
                    var imageWidth = 600,//定义画布大小,也就是图片压缩之后的像素
                        canvas = document.createElement('canvas'),
                        context = canvas.getContext('2d');
                    let imageHeight = Math.ceil(imageWidth * this.height / this.width);
                    canvas.width = imageWidth;
                    canvas.height = imageHeight;
                    context.clearRect(0, 0, imageWidth, imageHeight);
                    context.drawImage(this, 0, 0, imageWidth, imageHeight);
                    var data = canvas.toDataURL('image/jpeg')
                    callback(data)
                });
                image.attr('src', e.target.result)
            };
            reader.readAsDataURL(fileObj);
        } catch (e) {
            console.log('压缩失败!')
        }
    }
}

//对图片放大,缩小,拖动,旋转
function biggerimg(e) {
    var img = new Image();
    img.src = $(e).attr("src");
    var width = img.width, height = Math.ceil(width * img.height / img.width);
    var imgHtml = "<img id='bigimg' width='" + img.width + "' src='" + img.src + "' />";
    var index = layer.open({
        type: 1,
        shade: 0.8,
        title: false,
        area: ['auto', 'auto'],
        // area : ['100%', '100%'],
        shadeClose: true,//点击外围关闭弹窗
        content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
    });
    let strwarn = '<h3 class="ml-20" style="color: #ffffff;">双击可旋转，长按滑动可拖动，滚轮滑动可缩放</h3>';
    $('.layui-layer-shade').html(strwarn);
    //滚动变大缩小
    mouseZoomer(img);
    //点击旋转
    toRotate();
}
//滚动变大缩小
function mouseZoomer(img) {
    $('body').mousewheel(function (event, delta) {
        width = Number($('#bigimg').attr('width'));
        delta > 0 ? width += 100 : width -= 100;
        var dw = $(window).width();
        var wh = $(window).height();
        width > dw ? width = dw : width < 100 ? width = 100 : '';
        height = Math.ceil(width * img.height / img.width);
        let left = (dw - width) / 2;
        let top = (wh - height) / 2;
        $('#bigimg').attr('width', width).parents('.layui-layer-content').removeAttr('style').parents('.layui-layer-page').css('top', top).css('left', left);
    });
}

//点击旋转
function toRotate() {
    var current = 0;
    $("#bigimg").on({
        dblclick:function(){
            current = (current + 90) % 360;
            $(this).parents('.layui-layer-page').css('transform', 'rotate(' + current + 'deg)');
        },
        mousedown: function (e) {
            var el = $(this).parents('.layui-layer-page');
            var os = el.offset();
            dx = e.pageX - os.left, dy = e.pageY - os.top;
            $(document).on('mousemove.drag', function (e) {
                el.offset({top: e.pageY - dy, left: e.pageX - dx});
            });
        }, mouseup: function (e) {
            $(document).off('mousemove.drag');
        }
    })
}

